<template>
	

	<view class="content an-index">
		<view class="">
			<view class="details-message" style="margin-top:0px;">
				<p class="bold pB5" >{{title}}</p>
				<div>
					<view class="jin bg_white pT10 pB10">
						<div class="jin-frist">
							<image style="width: 100%;border-radius: 100%; height: 100%; bobackground-color: #eeeeee;" mode="aspectFill" :src="appointmentdata.vister_personimg | personimg" @error="imageError"></image>
						</div>
					</view>
				</div>
				<view class="details-message-sex" >访客姓名：{{ appointmentdata.vister_name }}</view>
				<view class="details-message-phone">手机号码：{{ appointmentdata.vister_mobile }}</view>
				<view class="details-message-number">{{titlesm}}公司：{{ appointmentdata.app_company_name }}</view>
				<view class="details-message-number">{{titlesm}}部门：{{ appointmentdata.app_address }}</view>				
				<view class="details-message-name">到访开始：{{retime(appointmentdata.app_visittime)}}</view>
				<view class="details-message-name" v-if="appointmentdata.app_endvisittime">到访结束：{{retime(appointmentdata.app_endvisittime)}}</view>
				<view class="details-message-phone" v-if="appointmentdata.carnumber">车牌号码：{{appointmentdata.carnumber}}</view>
				<view class="details-message-sex" >{{titlesm}}原由：{{ appointmentdata.app_reson }}</view>
				<view class="details-message-number" v-if="appointmentdata.app_remark">备注：{{ appointmentdata.app_remark }}</view>
				
			</view>	
			
		</view>
		
		
		<view class="second" style="margin-top:50px;">
			<view class="f16 tCenter" v-if="controlchangerall">
				请确定是否同意，该访客如期到访？
			</view>
			
			<view class="f16 tCenter" v-if="!controlchangerall">
				本次邀请已审核
			</view>
		<view class="an-index-grid pB100ux pT10" v-if="controlchangerall">
			<view class="an-index-box box-color1" :class="{control:controlchanger}" @click="refuse">
				<div class='an-head-tile'>
					<div class='title' >不接受</div>
				</div>
		
			</view>
			<view class="an-index-box box-color3" :class="{control:controlchanger}" @click="acceptadd">
				<div class='an-head-tile'>
					<div class='title'>通过</div>
				</div>
		
			</view>
		
		</view>
		
		
		</view>
		<backhome></backhome>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { hostRoot, img } from '@/common/util.js';
import request from '../../common/vmeitime-http/requstx.js'; //引进requst方法
import defaultImg from '@/static/img/userImg.jpg';
import {appointmentinfo,appointmentaccept,appointmentrefuse} from '../../common/api/appointment.js';
import {userinfo} from '@/common/api/user.js'
import backhome from '@/components/backhome.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import {timestampToTime} from "@/common/common.js"
// #ifdef H5 
var jweixin = require('@/components/jweixin-module/index.js');
// #endif
export default {
	components: {
		backhome
	},
	components: { uniIcons },
	data() {
		return {
			appointmentinfodata:[],
			province: ['京', '湘', '津', '鄂', '沪', '粤', '渝', '琼', '翼', '川', '晋', '贵', '辽', '云', '吉', '陕', '黑', '甘', '苏', '青', '浙', '皖', '藏', '闽', '蒙', '赣', '桂', '鲁', '宁', '豫', '新'],
			appointmentdata:{
				followuser:'',
			},
			userSrc: '',
			userSrcnews: '',
			grids: [],
			user_name: '',
			company: '',
			visittime: '',
			reson: '',
			remark: '',
			mobile: '',
			address: '',
			id: '',
			appId: '',
			timestamp: '',
			nonceStr: '',
			signature: '',
			controlchanger:true,
			controlchangerall:true,
			tips:'',
			btnstate:"",
			intype:'',
			showclick:true,
			skipstate:'',
			title:'邀请详情',
			titlesm:'邀请',
			titlesm2:'到访',
		};
	},

	onLoad(event) {
		try {
			this.banner = JSON.parse(decodeURIComponent(event.visitorinfo));
			this.appointmentdata= JSON.parse(decodeURIComponent(event.visitorinfo));
			console.log(this.banner);
		} catch (error) {
			this.banner = JSON.parse(event.visitorinfo);
			this.appointmentdata= JSON.parse(event.visitorinfo);
			console.log(this.banner);
		}
		
		// if(this.appointmentdata.followuser){
		// 	this.appointmentdata.followuser=JSON.parse(this.appointmentdata.followuser)
		// }else{
		// 	this.appointmentdata.followuser=[];
		// }
		console.log(this.appointmentdata.followuser)
		this.id = this.banner.id;
		if(event.btnstate){
			this.btnstate=event.btnstate
		}
		
		if(event.skipstate){
			this.skipstate=event.skipstate;
			
			if(this.skipstate=="c_adu"){
				uni.setNavigationBarTitle({
				　　title:'预约申请'
				})
				this.title='预约详情';
				this.titlesm='受访';
				this.titlesm2='预约';
			}
		}
		
		if(event.type){
			this.intype=event.type;
			if(this.intype=='yq'){
				uni.setNavigationBarTitle({
				　　title:'邀请审核'
				})
			}
			
		}
		
		console.log(this.banner.meeting_status!=0)
		if(this.banner.m_status==10||this.banner.m_status==8||this.banner.m_status==11){
			 this.controlchanger = false;
		}else{
			 this.controlchanger = true;
		}
		uni.getStorage({
			key: 'headimgurl',
			success: res => {
				console.log(res.data);
				this.userSrc = res.data;
				console.log(this.userSrc);
			}
		});
		
		
	},

	
	onShow() {
		 // this.controlchanger = false;
		// this.controlchangerall = false
		appointmentinfo({id:this.banner.id,appointmentid:this.banner.id}).then(res=>{
			this.appointmentinfodata= res.data.data;
			if(this.appointmentinfodata.appointment_details.m_status==11||this.appointmentinfodata.appointment_details.m_status==8||this.appointmentinfodata.appointment_details.m_status==10){
				this.controlchangerall = true;
			}else{
				this.controlchangerall = false;
			}
			
			
		})
		
		// userinfo({}).then(res=>{
		// 	if(this.appointmentinfo.uid == res.data.data.id){
		// 		this.controlchanger = true;
		// 		this.tips = '该邀请属于自己'
		// 	}
		// })
		

		
	},
	methods: {
		retime(val){
			return timestampToTime(val)
		},
		acceptadd(){
			let that=this;
			
			uni.showLoading({  
				title: '正在进行相关操作...'  
			});
			if(this.controlchanger){
				if(this.tips!=''){
					uni.showToast({
						title: this.tips,
						icon: 'none',
						duration: 2000
					});
				}
				return;
				}
				if(this.banner.type=='1'){
					var showtype='';
				}else{
					var showtype='viss';
				}
				if(this.showclick){
					this.showclick=false;
			appointmentaccept({id:this.banner.id,appointmentid:this.banner.id,type:showtype,auditing:'1',intype:this.intype}).then(res=>{
				this.showclick=true;
				uni.hideLoading(); 
				if(res.data.code==400){
					this.controlchanger = true;
					uni.showModal({
						title: '提示',
						content: res.data.message,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				this.controlchanger = false;
				if(this.btnstate){
					uni.showModal({
						title: '提示',
						content: res.data.message,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								if(that.intype=='yq'){
									uni.reLaunch({
										url: "/pages/yaoqing/yaoqinglist"
									});
								}else{
									uni.reLaunch({
										url: "/pages/user/user"
									});
								}
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});	
				} else if(this.skipstate=='c_adu'){
					uni.showModal({
						title: '提示',
						content: res.data.message,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								// that.backrefresh('123');
								uni.reLaunch({
									url: "/pages/comster/comster_adu"
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					// uni.showToast({
					// 	title: res.data.message,
					// 	icon: 'none',
					// 	duration: 2000
					// });
					uni.showModal({
						title: '提示',
						content: res.data.message,
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								// that.backrefresh('123');
								if(that.intype=='yq'){
									uni.reLaunch({
										url: "/pages/yaoqing/yaoqinglist"
									});
								}else{
									that.backrefresh('123');
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				
				}
				
			})
			}
		},		
		refuse(){
			if(this.controlchanger){
				if(this.tips!=''){
					uni.showToast({
						title: this.tips,
						icon: 'none',
						duration: 2000
					});
				}
				return;
				}
			uni.navigateTo({
				url: '/pages/yaoqing/invitationRefuse?id='+this.banner.id+'&type=viss&intype='+this.intype+'&skipstate='+this.skipstate,
			});
		},
		modify(){
			if(this.controlchanger){return}
			uni.navigateTo({
				url: '/pages/yaoqing/invitationModification?appointment='+this.banner.id,
			});
		},
	}
};
</script>

<style lang="scss">
	.details-message {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 0px 0;
			padding: 10px;
			background-color: #fff;
			border-bottom: 1px solid #eee;
		}
	}
.an-index {
	padding: 15px 0px;
	background-color: #efeff4;
	// background: #fefefe url(../../static/img/head_bg.png) no-repeat;
	background-size: 100% auto;
}

.an-head-nav {
	padding: 40upx 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	.title {
		font-size: 18px;
		padding-left: 10px;
	}

	.btn {
		font-size: 18px;
		padding: 0 8px;
	}
}
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	
}

.swiper-item {
	height: 100%;
}

.an-index-grid {
	display: flex;
	flex-direction: row; //主轴方向
	flex-wrap: wrap; //换行
	justify-content: space-between; //主轴上的对齐方式
	width: 70%;
	    margin: auto;
}

.an-index-box {
	flex: 0 1 41%; //flex-grow, flex-shrink 和 flex-basis的简写
	//flex-grow: 0;	//等分剩余空间
	//flex-shrink: 1;	//等比例缩小
	//flex-basis: 48%;	//占据的主轴空间
	height: 40px;
	line-height: initial;
	color: #ffffff;
	margin-bottom: 20px;
	border-radius: 10px;
	box-shadow: 0px 10px 8px #e8e8e8;

	.an-head-tile {
		//交叉轴对齐方式
		text-align: center;
		    line-height: 40px;
	}
}

.an-body-cont {
	margin-top: 5px;
}

.box-color2 {
	background: linear-gradient(to bottom right, #8f8f94, #888);
}

.box-color3 {
	background: #007aff;
}

.box-color1 {
	background: red;
}

.jin {
	position: relative;
}

.jin-frist {
	background: #bebebe;
	// position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	left: 0;
	color: white;
	text-align: center;
	width: 80px;
	height: 80px;
	border-radius: 80px;
	box-shadow: 0px 10px 8px #e8e8e8;
}

.title-first {
	font-size: 17px;
	margin-top: 50px;
}

.title-first1 {
	font-size: 17px;
	margin-top: 5px;
}

.qiun-charts {
	width: 100%;
	height: 500upx;
	background-color: #ffffff;
}

.charts {
	width: 100%;
	height: 500upx;
	background-color: #ffffff;
}
.control{
	background:#5f5f5f;
}
</style>
<style>
	body{
		background: white;
	}
.yaoqing {
	margin-top: 20px;
	text-align: center;
}
</style>
